Ga naar hoofdinhoud

Functies en variabelen

Functies en variabelen​

In JavaScript zijn er twee belangrijke bouwblokken waar we code mee kunnen schrijven: functies en variabelen. We gaan nog even de belangrijkste dingen over beide overlopen omdat ze zo fundamenteel zijn.

Variabelen​

In een variabele kunnen we data opslaan. Deze data kan allerlei vormen aannemen. Enkele belangrijke data types zijn:

  • String
  • Number
  • Boolean
  • Object
  • Array

String​

Een string wordt gebruikt om tekst op te slaan, bv: "Hallo studenten". Een string wordt gedefinieerd met dubbele of enkele quotes.

const hallo = "Hallo studenten";
const ookHallo = 'Hallo studenten'; // Is hetzelfde

Number​

Een number wordt gebruikt om getallen op te slaan. Een number wordt gedefinieerd zonder quotes en moet een geldige numerieke waarde zijn.

const nummer1= 10
const nummer2 = 3.5 // Kan ook een kommagetal zijn. Let op de "." in plaats van een ",".
const nummer3= -10 // Kan ook een negatief getal zijn.

Boolean​

Een Boolean is ofwel true ofwel false.

const waar = true;
const fout = false;

Array​

Een Array wordt gebruikt om een lijst op te slaan. Dit kan een lijst van variabelen van hetzelfde type zijn maar het kunnen ook verschillende types zijn. Een Array wordt gedefinieerd met vierkante haakjes en elk element in de Array wordt gescheiden door een komma. Bv ["tekst", 10] of [1,2,3,4] zijn beide geldige Arrays.

Hoewel het technisch gezien mogelijk is dat een Array verschillende datatypes bevat, wordt dit over het algemeen afgeraden.

const array1 = ["tekst", 10]; // Een Array met verschillende soorten data types. Dit komt in de praktijk normaal niet voor.
const array 2 = [1,2,3,4]; // Een Array van nummers

Object​

Een Object is ook een soort van verzameling van andere variabelen, gelijkaardig aan een Array. Het verschil is dat waar in een Array andere variabelen gewoon in een lijst worden gestoken, ze in een Object ook een naam krijgen. We zeggen dat een object eigenschappen, of in het Engels properties, heeft.

const verzameling = {
    "eigenschap1": "de waarde die ik wil dat eigenschap 1 heeft",
    "naam": "Anneleen",
    "leeftijd": 20
}

Variabelen definiëren​

Een variabele kan gedefinieerd worden met 3 verschillende keywords: var, let, const. Hoewel nog steeds geldige syntax wordt var eigenlijk beschouwd als legacy en niet meer aangeraden om te gebruiken. Wanneer we een variabele hebben waarvan we niet willen dat de waarde nog kan veranderen, gebruiken we const. Als de waarde van een variabele nog gemanipuleerd gaat worden in de code gebruiken we let.

var info = "informatie die heel belangrijk is"; // Variabelen met var definiëren is outdated en wordt niet meer vaak gebruikt.
let teller = 0; // Ik ga de variabele teller waarschijnlijk willen ophogen of verlagen op andere plaatsen in de code. De waarde van deze variabele gaat dus nog veranderen. Daarom definieer ik het met let.
const pi = 3.14 // De waarde van pi ligt vast. Ik kan dit dus best in een const steken zodat het niet meer kan veranderen.

Wanneer je een variabele alleen maar aanmaakt (=declareren) maar er geen waarde aan toekent (= assignen) dan is de waarde van de variabele automatisch undefined. Dit gaat alleen maar met let en var. Variabelen die met const gedeclareerd worden moeten ook een waarde krijgen.

let info; // De waarde van info is "undefined"
const naam = "Anneleen"; // Dit moet altijd een assignment krijgen.

Tot slot kan je ook rechtstreeks de uitkomst van een formule of van een operatie toekennen aan een variabele.

Wanneer we 2 strings bij elkaar optellen noemen we dat concateneren. Als je ergens in je optelling een string gebruikt is het eindresultaat ook automatisch een string.

const som = 10 + 10; // De waarde van som zal 20 zijn.
const zin = "Hallo" + " " + "studenten"; // De waarde van zin is "Hallo studenten".
const nummerNaarTekst = "5" + 2 + 3; // De waarde van nummerNaarTekst is "523".

Er is ook een kortere versie om een string of tekst te combineren met andere variabelen. Dit noemt de backtick notatie.

const getal = 10;
const concateneren = "Dit is een getal: " + getal; // Print "Dit is een getal: 10"

const backtick = `Dit is een getal ${getal};` // Print ook "Dit is een getal: 10"

Functies​

Een functie is een blok code die een bepaalde taak gaat uitvoeren. De code in de functie blok wordt uitgevoerd op het moment dat de functie aanroepen (=gecalled) wordt. Een functie aanroepen doe je door de naam van de functie met haakjes erachter in je code te schrijven.

function printInfo() {
    console.log("print deze info af");
}
// De functie is nu gedefinieerd maar de code in de functie blok is nog niet uitgevoerd. Pas wanneer we de functie aanroepen wordt hij uitgevoerd.

printInfo();
// Hier wordt de code in de functie uitgevoerd en wordt "print deze info af" in de console geprint.

Een functie kan 1 of meerdere input variabelen definiëren. Dat noemen we parameters. De waardes die tijdens het aanroepen van een functie daadwerkelijk meegegeven worden zijn de argumenten.

function vermenigvuldig(parameter1, parameter2) {
    return parameter1 * parameter2;
}

vermenigvuldig(3, 5) // 3 en 5 noemen we de argumenten

Wanneer een functie een return statement tegenkomt zal hij stoppen met uitvoeren. Alles na return wordt dus niet meer uitgevoerd.

function doIets(parameter1, parameter2) {
    const som = parameter1 + parameter2;
    return som; // De functie voert de return statement uit en stopt dan.
    console.log(som); // DIT WORDT NIET MEER UITGEVOERD
}

Als we een functie definiëren zoals hierboven, dan moeten we onze functie een naam geven.

We kunnen ook anonieme functies definiëren. Dit zijn vaak functies die we willen gebruiken binnen een kleinere context. Een anonieme functie wordt meestal aan een variabele toegekend.

const anoniem = function () {
    return "dit is een anonieme functie";
}

We kunnen sinds ES6 dezelfde functie schrijven aan de hand van een verkorte notatie, de arrow notatie.

const anoniem = () => {
    return "dit is een anonieme functie";
}